<template>
	<view class="root">
		<button @click="openPopup">打开下单成功弹框</button>
		<uni-popup
			class="popup"
			ref="popup" 
			type="bottom" 
			border-radius="10px 10px 0 0"
			>
			<view class="container">
				<view class="header">
					<image class="image" src="../../static/icon/success-green-icon.png" mode=""></image>
					<view class="success-text">下单成功，等待回收</view>
				</view>
				<view class="body">
					<view class="order-info-list">
						<view class="item">
							<uni-icons type="notification-filled" size="25"></uni-icons>
							<view class="text-info">
								2024-07-29 11:00-13:00
							</view>
						</view>
						<view class="item">
							<uni-icons type="phone-filled" size="25"></uni-icons>
							<view class="text-info">
								陈xx 15838337244
							</view>
						</view>
						<view class="item">
							<uni-icons type="location" size="25"></uni-icons>
							<view class="text-info">
								xx街道xxxxx78号xxxx
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="button-list">
						<button class="continue">继续下单</button>
						<button class="query">查看订单</button>
						<button class="goBack">返回首页</button>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	
	const popup = ref()
	
	
	
	function openPopup() {
		popup.value.open('bottom')
	}
	
</script>

<style lang="scss" scoped>
	.root {
		
		.popup {
			.container {
				position: relative;
				padding: 30rpx 30rpx 0 30rpx;
				background-color: white;
				border-radius: 50rpx;
				height: 800rpx;
				display: flex;
				flex-direction: column;
				gap: 40rpx;
				.header {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 20rpx;
					font-weight: 700;
					.image {
						width: 150rpx;
						height: 150rpx;
					}
					.success-text {
						
					}
				}
				.body {
					height: 240rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 30rpx;
					.order-info-list {
						width: 100%;
						display: flex;
						flex-direction: column;
						padding-left: 50rpx;
						.item {
							display: flex;
							gap: 20rpx;
							align-items: center;
							height: 70rpx;
							display: flex;
						}
					}
				}
				
				.bottom {
					.button-list {
						display: flex;
						button {
							background-color: #2ec076;
							color: white;
							font-weight: 700;
							font-size: 30rpx;
						}
					}
				}
				
			}
		}
	}
</style>